<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <title>vue-demo</title> 
    <style>
    </style>
  </head>
  <body> 
    <div id="appif">
      <p v-if="seen">现在你看到我了</p>
      <template v-if="ok">
        <h1>vue教程</h1>
        <p>123</p>
        <p>456</p>
      </template>

      <!--
      {{#if ok}}
        <h1>   Handlebars 模板 </h1>
      {{/if}}
      -->

      <div v-if="Math.random() > 0.5">
        Sorry
      </div>
      <div v-else>
        Not sorry
      </div>

      <div v-if="type === 'A'">
        A
      </div>
      <div v-else-if="type === 'B'">
        B
      </div>
      <div v-else-if="type === 'C'">
        C
      </div>
      <div v-else>
        Not A/B/C
      </div>

      <h1 v-show="ok">Hello!</h1>
      <hr/>

      v-for 指令需要以 site in sites 形式的特殊语法<br/>
      <hr/>
      <ol>
        <li v-for="site in sites">
          {{ site.name }}
        </li>
      </ol>

      模板中使用 v-for<br/>
      <hr/>
      <ul>
        <template v-for="site in sites">
          <li>{{ site.name }}</li> 
        </template>
      </ul>

      属性来迭代数据<br/>
      <hr/>
      <ul>
        <li v-for="value in object">
        {{ value }}
        </li>
      </ul>

      第二个的参数为键名:<br/>
      <hr/>
      <ul>
        <li v-for="(value, key) in object">
        {{ key }} : {{ value }}
        </li>
      </ul>

      第三个参数为索引<br/>
      <hr/>
      <ul>
        <li v-for="(value, key, index) in object">
         {{ index }}. {{ key }} : {{ value }}
        </li>
      </ul>
      循环整数<br/>
      <hr/>
      <ul>
        <li v-for="n in 10">
         {{ n }}
        </li>
      </ul>
      <hr/>
      <p>原始字符串: {{ message }}</p>
      <p>{{ message.split('').reverse().join('') }}</p>
      <p>计算后反转字符串: {{ reversedMessage }}</p>
      <p>计算后反转字符串2: {{ reversedMessage2 }}</p>
  </div>
<hr/>  

    <script>
      new Vue({
        el: '#appif',
        data: {
          message:"这是一个很长的字符串",
          seen: true,
          ok: true,
          type: 'C',
          sites: [
            { name: 'baidu' },
            { name: 'Google' },
            { name: 'Taobao' }
          ],
          object: {
            name: 'name',
            url: 'url',
            slogan: 'slogan！'
          }
        },
        //可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
        computed: {
          // 计算属性的 getter
          reversedMessage: function () {
            // `this` 指向 vm 实例
            return this.message.split('').reverse().join('')
          },
          //computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter 
          site: {
              // getter
              get: function () {
                return this.message + ' 111 '
              },
              // setter
              set: function (newValue) {
                var names = newValue.split(' ')
                this.name = names[0]
                this.message = names[names.length - 1]
              }
            }
        },
          methods: {
          reversedMessage2: function () {
            return this.message.split('').reverse().join('')
          }
        }
      })
      </script>

  </body>
</html>
